<%--
  Created by IntelliJ IDEA.
  User: asus
  Date: 2015/3/26
  Time: 12:11
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title></title>
    <script type="text/javascript" src="<%=request.getContextPath() %>/resources/js/jquery.min.js"></script>
    <script type="text/javascript" src="<%=request.getContextPath() %>/resources/js/highcharts.js"></script>
    <script type="text/javascript" src="<%=request.getContextPath() %>/resources/js/exporting.js"></script>
    <script type="text/javascript" src="<%=request.getContextPath() %>/resources/js/highcharts-3d.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            var chart1;
            var options = {
                chart: {
                    renderTo: 'container', //DIV容器ID
                    type: 'column',
                    margin: 75,
                    options3d: {
                        enabled: true,
                        alpha: 10,
                        beta: 25,
                        depth: 70
                    }
                },
                title: {
                    text: '本年销售额统计'
                },
                subtitle: {
                    text: ''
                },
                yAxis: {
                    title: {
                        text: '销售额(￥)'
                    },
                    plotLines: [{
                        value: 0,
                        width: 1,
                        color: '#808080'
                    }]
                },
                plotOptions: {
                    column: {
                        depth: 25
                    }
                },

                //x轴显示内容
                xAxis: {
                    categories: [ ]
                },
                series: [{ }]
            };
            //json url 地址这里我使用的servlet
            var url =  "http://localhost:8888/MicroMart/seller/yearSta";
            $.getJSON(url,function(data) {

                options.series[0].data = data.moneyList;
                options.series[0].name ="Sales";
                options.xAxis.categories=data.day;
                options.subtitle.text=data.total+"元";
                var chart = new Highcharts.Chart(options);
                chart1=chart;
//        });
            });
            $('#R0').on('change', function(){
                chart1.options.chart.options3d.alpha = this.value;
                showValues();
                chart1.redraw(false);
            });
            $('#R1').on('change', function(){
                chart1.options.chart.options3d.beta = this.value;
                showValues();
                chart1.redraw(false);
            });

            function showValues() {
                $('#R0-value').html(chart1.options.chart.options3d.alpha);
                $('#R1-value').html(chart1.options.chart.options3d.beta);
            }
            showValues();
        })

    </script>
</head>
<body>
<div id="container" style="min-width:700px;height:500px"></div>
<div id="sliders" style="min-width:310px;max-width: 800px;margin: 0 auto;">
    <table>
        <tr><td>Alpha Angle</td><td><input id="R0" type="range" min="0" max="45" value="15"/> <span id="R0-value" class="value"></span></td></tr>
        <tr><td>Beta Angle</td><td><input id="R1" type="range" min="0" max="45" value="15"/> <span id="R1-value" class="value"></span></td></tr>
    </table>
</div></body>
</body>
</html>
